<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag>
      <div>
        <h3 style="color:#009688;">基础信息</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 5px;"></div>
      <div style="margin-bottom:15px">
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <div style="display:flex">
          <el-row :gutter="16" justify="start" style="width:60%">

            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="单位:" prop="gldwmc">
                <el-input v-model="ruleForm.gldwmc" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="出厂编码:" prop="ccbm">
                <el-input v-model="ruleForm.ccbm" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="设备名称:" prop="sbmc">
                <el-input v-model="ruleForm.sbmc" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="设备类型:" prop="sblxmc">
                <el-input v-model="ruleForm.sblxmc" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="规格:" prop="sbgg">
                <el-input v-model="ruleForm.sbgg" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="型号:" prop="xh">
                <el-input v-model="ruleForm.xh" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>


            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="贴签人:" prop="tqrName">
                <el-input v-model="ruleForm.tqrName" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="贴签时间:" prop="tqTime">
                <el-input v-model="ruleForm.tqTime" placeholder="无数据" clearable disabled></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="16" justify="start" style="width:40%">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div style="display:flex;flex-direction: column;align-items: center;">
                <el-image style="width: 150px; height: 150px;" :src="sburl" :preview-src-list="srcList">
                  <div slot="error" class="imageError">
                    <span>暂无图片</span>
                  </div>
                </el-image>
                <el-button type="primary" style="margin-top:10px">设备图片</el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div style="display:flex;flex-direction: column;align-items: center;">
                <el-image style="width: 150px; height: 150px;" :src="erweimaurl"
                          :preview-src-list="erweimaList">
                  <div slot="error" class="imageError">
                    <span>暂无图片</span>
                  </div>
                </el-image>
                <el-button type="primary" style="margin-top:10px">二维码图片</el-button>

              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <h3 style="color:#009688;">设备贴签信息</h3>
        </div>
        <div style="width:100%;height:2px;background:#009688;margin-bottom: 5px;"></div>
        <div style="margin-bottom:15px">
          <el-row :gutter="16" justify="start">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div style="display:flex;flex-direction: column;align-items: center;">
                <el-image style="width: 150px; height: 150px;" :src="url"
                          :preview-src-list="qjzpList">
                  <div slot="error" class="imageError">
                    <span>暂无图片</span>
                  </div>
                </el-image>
                <el-button type="primary" style="margin-top:10px">全景图片</el-button>

              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div style="display:flex;flex-direction: column;align-items: center;">
                <el-image style="width: 150px; height: 150px;" :src="tqimg"
                          :preview-src-list="tqList">
                  <div slot="error" class="imageError">
                    <span>暂无图片</span>
                  </div>
                </el-image>
                <el-button type="primary" style="margin-top:10px">贴签照片</el-button>

              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <h3 style="color:#009688;">审核信息</h3>
        </div>
        <div style="width:100%;height:2px;background:#009688;margin-bottom: 5px;"></div>
        <div style="margin-bottom:15px">
        </div>
        <el-row :gutter="16" justify="start">

          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="审核结论:" prop="shztbm">
              <el-select v-model="ruleForm.shztbm" placeholder="请选择" clearable style="width: 100%"
                         @change="handleChange"
              >
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="审核人:" prop="shPerson">
              <el-input v-model="ruleForm.shPerson" placeholder="请输入审核人" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="审核时间:" prop="shTime">
              <el-input v-model="ruleForm.shTime" placeholder="请输入审核时间" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="审核意见:" prop="shyj">
              <el-input v-model="ruleForm.shyj" placeholder="请输入审核意见" clearable type="textarea">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>


      <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button type="primary" @click="handleSubmit()" :size="size">确认</el-button>
        <!-- <el-button type="primary" @click="handleSubmitNo()" :size="size">不通过</el-button> -->
                <el-button @click="handleCancel()" :size="size">取消</el-button>

            </span>
    </el-dialog>
  </div>
</template>
<script>
import {approvallabelFrom} from "../model/approvallabelFrom";
import {approvallabel} from '@/api/equip/approvallabel.js'
import {generateQRCode} from '@/api/equip/generateQRCode.js'
import {getInfo} from "@/api/login";
import moment from "moment";

export default {
  data() {
    return {
      zxoptions: [
        {
          label: '通过',
          value: '20'
        },
        {
          label: '不通过',
          value: '30'
        },
      ],
      dialogProps: {
        visible: false,
        title: "设备标签审核",
        width: "70%",

      },
      footerVisible: true,
      size: "medium",
      ruleForm: approvallabelFrom.FormData,
      rules: approvallabelFrom.rules,
      disabledForm: true,

      xsnrShow: true,
      list: {
        data: []
      },
      row: {},
      sburl: '',
      url: '',
      tqimg: '',
      srcList: [],
      qjzpList: [],
      tqList: [],
      erweimaurl: '',
      erweimaList: [],
    };
  },
  methods: {
    showDialog(row) {
      this.row = row
      for (let key in this.ruleForm) {
        this.ruleForm[key] = row[key];
      }
      let qjzp = row.qjzp ? row.qjzp.split(',')[0] : "" //全景照片
      let sbzp = row.sbzp ? row.sbzp.split(',')[0] : ""//设备照片
      let tqzp = row.ewmzp ? row.ewmzp.split(',')[0] : ""//贴签照片
      let GLOBAL_URL = {
        UDS_URL: null
      };
      this.sburl = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + sbzp + '/user.png'
      this.url = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + qjzp + '/user.png'
      this.tqimg = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + tqzp + '/user.png'
      let srcList = row.sbzp && row.sbzp.split(',')
      if (srcList !== null) {
        srcList.forEach(item => {
          if (item == null) {
          } else {
            let photo = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + item + '/user.png'
            this.srcList.push(photo)
          }
        })
      }
      let qjzpList = row.qjzp && row.qjzp.split(',')
      if (qjzpList !== null) {
        qjzpList.forEach(item => {
          if (item == null) {
          } else {
            let photo = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + item + '/user.png'
            this.qjzpList.push(photo)
          }
        })
      }
      let tqList = row.ewmzp && row.ewmzp.split(',')
      if (tqList !== null) {
        tqList.forEach(item => {
          if (item == null) {
          } else {
            let photo = GLOBAL_URL.UDS_URL + '/FileController/downFile/' + item + '/user.png'
            this.tqList.push(photo)
          }
        })
      }
      this.getEwmData(row)
      getInfo().then(res => {
        this.ruleForm.shPerson = res.user.nickName
        this.ruleForm.shTime = moment().format("YYYY-MM-DD HH:mm:ss")
      })
      this.ruleForm.shztbm = '20'
      this.dialogProps.visible = true;
    },
    getEwmData(row) {
      generateQRCode.getEwmData(row.sbbm).then(res => {
        this.erweimaurl = res.data[0].ewm
        this.erweimaList.push(res.data[0].ewm)
      }).catch(err => {
        console.log(err)
      })


    },
    handleChange(val) {
      if (val === '20') {
        this.ruleForm.shztmc = '审核通过'
      } else {
        this.ruleForm.shztmc = '审核不通过'
      }
    },
    //确定
    handleSubmit() {
      if (this.ruleForm.shztbm === '30') {
        if (this.ruleForm.shyj == '') {
          this.$message.warning('请填写审核结论');
        } else {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              if (this.ruleForm.shztbm === '20') {
                this.ruleForm.shztmc = '审核通过'
              } else {
                this.ruleForm.shztmc = '审核不通过'
              }
              let params = [{
                id: this.row.id,
                shr: this.ruleForm.shr,
                shTime: this.ruleForm.shTime,
                shyj: this.ruleForm.shyj,
                shztbm: this.ruleForm.shztbm,
                shztmc: this.ruleForm.shztmc
              }]
              approvallabel.equipUpdate(params).then(res => {
                this.dialogProps.visible = false;
                this.$message.success('审核完成');
                this.$emit('onSearch')


              }).catch(err => {
                console.log(err)
              })
            } else {
              return false;
            }
          });
        }
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.ruleForm.shztbm === '20') {
              this.ruleForm.shztmc = '审核通过'
            } else {
              this.ruleForm.shztmc = '审核不通过'
            }
            let params = [{
              id: this.row.id,
              shr: this.ruleForm.shr,
              shTime: this.ruleForm.shTime,
              shyj: this.ruleForm.shyj,
              shztbm: this.ruleForm.shztbm,
              shztmc: this.ruleForm.shztmc
            }]
            approvallabel.equipUpdate(params).then(res => {
              this.dialogProps.visible = false;
              this.$message.success('通过成功');
              this.$emit('onSearch')
            }).catch(err => {
              console.log(err)
            })


          } else {
            return false;
          }
        });
      }
    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()

      this.row = {}
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
  },
};
// 创建一个简单的超链接渲染

</script>
<style>
.imageError {
  text-align: center;
  width: 160px;
  height: 100px;
  line-height: 100px;
  color: #606266;
}

.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
</style>
